<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])
watch(() => props.tableData, (newVal) => {
  if (newVal) {
    nextTick(() => {
      init()
    })
  }
}, {immediate: true})


const init = () => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      color: ['#ff9826', '#fde985'],
      grid: {
        top: 80,
        bottom: 45,
        right: 50,
      },
      xAxis: {
        type: 'category',
        data: props.tableData.key,
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.65)',
          interval: 0,
          margin: 10
        },
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'line',
          showSymbol: true,
          smooth: true,
          lineStyle: {
            color: "#ff853f",
            width: 4,
          },
          label: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 146, 69,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 146, 69,.1)",
                    },
                  ],
                  false
              ),
            },
          },
          data: props.tableData.value,
        }
      ],
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
}

</script>

<style lang="less" scoped>
</style>
